<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名单</title>
</head>
<style>
    table {
        width: 400px;
        height: auto;
        border: 1px solid black;
        padding: 5px;
        margin: 50px 0 0 200px;
    }
    tr {
        width: 400px;
        height: 50px;
    }
    td {
        width: 94px;
        height: 48px;
        border: 1px solid black;
        margin: 0 2px;
        text-align: center;
    }
    .del {
        color: blue;
    }
</style>
<body id="bo">
    <div class="a">
        <span>姓名：</span>
        <input type="text" value="" id="name">
        <span>年龄：</span>
        <input type="text" value="" id="age">
        <button id="bt">添加</button>
        <button id="bs">搜索</button>
    </div>
    <table id="ta">
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </table>
</body>
<script>
function getid(id) {
    return document.getElementById(id);
}
function creat(cr) {
    return document.createElement(cr);
}
function gettn (tn) {
    return document.getElementsByTagName(tn);
}
function getcn (cn) {
    return document.getElementsByClassName(cn)[0];
}
var bo = getid("bo");
var names = getid("name");
var age = getid("age");
var bt = getid("bt");
var bs = getid("bs");
var ta = getid("ta");

// function crtable () {
//     var ta = creat("table");
//     ta.id = "ta";
//     var tr = creat("tr");
//     var td1 = creat("td");
//     var td2 = creat("td");
//     var td3 = creat("td");
//     var td4 = creat("td");
//     td1.innerText = "ID";
//     td2.innerText = "姓名";
//     td3.innerText = "年龄";
//     td4.innerText = "操作";
//     tr.appendChild(td1);
//     tr.appendChild(td2);
//     tr.appendChild(td3);
//     tr.appendChild(td4);
//     ta.appendChild(tr);
//     bo.appendChild(ta);
// }


var arr = [];
var abb = [];
var n=0;

bt.onclick = function () {
    arr[n] = ["","","",""];
    arr[n][0] = +n+1;
    arr[n][1] = names.value;
    arr[n][2] = age.value;
    arr[n][3] = "删除";
    ta.appendChild(adds(n));
    n++;   
}
function cc () {
    for (var i=0;i<arr.length;i++) {
        ta.appendChild(adds(i));
    }
    n = arr.length;
}

function adds (n) {
    var m = n;
    var _tr = creat("tr");
    for (var i=0;i<4;i++) {
        var _td = creat("td");
        _td.innerText = arr[n][i];
        if (i == 3) { 
            _td.className = "del";
            abb[m] = _td;
            abb[m].setAttribute('onclick', 'del(this)');
        }
        _tr.appendChild(_td);
    }
    return _tr;
}

function del(obj) {
    var _deltr = obj.parentNode;
        // _deltr.remove();  
        x = _deltr.getElementsByTagName("td")[0].innerText;
        x = parseInt(x)-1;       
        console.log(x);
        _trtr = ta.getElementsByTagName("tr");
        for (var i = 1;i<arr.length;i++) {
            _trtr[i].remove();
            console.log(i);
        }
        // ta.remove();
        // crtable();



        var newarr = arr.splice(x,1);
        var newarr = abb.splice(x,1);
        for (var i = 0;i<arr.length;i++) {
            arr[i][0] = +i+1;
        }
        cc ();
    }




</script>
</html>